import React from 'react';
export default class App extends React.Component {
  state = {
    count: 0,
    msg: '1',
    name: 'zs',
  };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  handleClickmsg = () => {
    this.setState({ msg: this.state.msg + '~' });
  };

  handleClickname = () => {
    this.setState({ name: this.state.name + 'lz' });
  };
  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <h2>{this.state.msg}</h2>
        <button onClick={this.handleClickname}>点我修改名字</button>
        <button onClick={this.handleClickmsg}>点我修改msg</button>
        <button onClick={this.handleClick}>点我修改数量</button>
        <Footer count={this.state.count} name={this.state.name}></Footer>
      </div>
    );
  }
}

class Footer extends React.PureComponent {
  // 本质是更新阶段的一个钩子函数，会在更新之前执行
  // 作用是自定义是否允许更新
  // shouldComponentUpdate(nextProps) {
  //   // 通过返回一个布尔值来控制是否更新
  //   // 返回true表示更新
  //   // 添加判断，nextProps表示更新后的props，this.props表示旧的，相同就不更新，不相同就更新
  //   if (nextProps.count !== this.props.count) {
  //     // 相同就不更新
  //     return true;
  //   }
  //   // 不相同就更新;
  //   return false;
  // }
  render() {
    console.log('render执行了');
    return (
      <div>
        我是footer,只接受count更新
        <h1>{this.props.count}</h1>
        <h1>{this.props.name}</h1>
      </div>
    );
  }
}
